﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/BackSite.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    管理操作日志
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <script src="../../Content/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript">
        Ext.Loader.setPath('Ext.ux', '../../Components/ux');
        Ext.require([
            'Ext.grid.*',
            'Ext.data.*'
        ]);
        Ext.onReady(function () {

            function ChangeDateFormat(val) {
                if (val != null) {
                    var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10));
                    //月份为0-11，所以+1，月份小于10时补个0
                    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                    var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                    var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                    return date.getFullYear() + "-" + month + "-" + currentDate + " " + hour + ":" + minutes + ":" + seconds;
                }
                return "";
            }

            function setChecked() { return true; }

            Ext.define('MyData', {
                extend: 'Ext.data.Model',
                fields: ['active',
                    //第一个字段需要指定mapping，其他字段，可以省略掉。   
                    'ID',
                     'OperationType',
                     'TableName',
                     'BusinessesName',
                     'Content',
                     'User_ID',
                     'CreateTime',
                     'IP',
                     'Location',
                     'Browser'
                ]
            });
            //创建数据源   
            store = Ext.create('Ext.data.Store', {
                model: 'MyData',
                autoLoad: true,
                pageSize: 15,
                remoteFilter: true,
                remoteSort: true,
                proxy: {
                    //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可   
                    type: 'ajax',
                    //url: 'LogOperationQuery',
                    api: {
                        read: 'LogOperationQuery',
                        create: '../../Handlers/LogHistoryOperation.ashx?act=add',
                        destroy: '../../Handlers/LogHistoryOperation.ashx?act=del',
                        update: '../../Handlers/LogHistoryOperation.ashx?act=edit'
                    },
                    reader: {
                        type: 'json',
                        root: 'data',
                        totalProperty: 'total'
                    },
                    writer: {
                        type: "json",
                        encode: true,//encode和root是配套使用的，只有设置了root时，encode才起作用
                        root: "data",//设置root的好处就是可通过习惯的方式在后台提取数据
                        allowSingle: false//不然还得判断提交数据是数组还是对象
                    }
                }
            });

            //创建Grid   
            grid = Ext.create('Ext.grid.Panel', {
                store: store,
                selModel: { selType: "checkboxmodel", checkOnly: true, mode: "MULTI" },
                columns: [
                    //{ xtype: 'rownumberer' },
                    { text: "序号", width: 50, dataIndex: 'ID', sortable: true },
                    //{ xtype: 'checkcolumn', text: '选择', dataIndex: 'active', checked: true, width: 100 },
                    { text: "操作类型", dataIndex: 'OperationType', sortable: false },
                    { text: "操作的表", width: 100, dataIndex: 'TableName', sortable: true },
                    { text: "操作的业务", width: 100, dataIndex: 'BusinessesName', sortable: true },
                    { text: "操作内容", flex: 1, width: 100, dataIndex: 'Content', sortable: true },
                    { text: "操作用户ID", width: 100, dataIndex: 'User_ID', sortable: true },
                    { text: "创建时间", width: 100, dataIndex: 'CreateTime', sortable: true, renderer: ChangeDateFormat },
                    { text: "IP", width: 100, dataIndex: 'IP', sortable: true },
                    { text: "地点", width: 100, dataIndex: 'Location', sortable: true },
                    { text: "浏览器", width: 100, dataIndex: 'Browser', sortable: true },
                ],
                dockedItems: [{
                    xtype: 'toolbar',
                    height: '50px',
                    items: [{
                        itemId: 'delete',
                        text: '删除',
                        id: "delete",
                        icon: '../../Content/images/delete.gif',
                        disabled: true,
                        handler: function () {
                            var grid = this.up("gridpanel");
                            var rs = grid.getSelectionModel().getSelection();
                            if (rs.length > 0) {
                                Ext.Msg.confirm('提示', '确认删除？', function (btn) {
                                    if (btn == "yes") {
                                        this.store.remove(this.getSelectionModel().getSelection());
                                        store.sync();
                                    }
                                }, grid)
                            }
                        }
                    }, '-', {
                        text: "刷新",
                        icon: '../../Content/images/refresh.gif',
                        handler: function () {
                            this.up("gridpanel").store.load();
                        }
                    }, '-', {
                        itemId: 'export',
                        text: '导出到Excel',
                        icon: '../../Content/images/application_go.png',
                        disabled: false,
                        handler: function () {
                            var selection = grid.getView().getSelectionModel().getSelection()[0];
                            if (selection) {
                                store.remove(selection);
                            }
                        }
                    }, '-',
                    {
                        xtype: 'exporterbutton',
                        store: store,
                        //                            //以下两项配置已在Buttion.js中配置默认路径 不需要重复指定， 有需要者可自行修改
                        swfpath: 'downloadify.swf',
                        //downloadImage: 'download.png',
                        //
                        //                            //这里可以根据当前表格指定导出的文件名
                        downloadName: '油水井管理系统错误日志Excel'
                    }]
                }],
                bbar: new Ext.PagingToolbar({
                    pageSize: 10,
                    store: store,
                    displayInfo: true,
                    displayMsg: '显示第{0}条到{1}条记录，一共{2}条',
                    emptyMsg: "没有记录"
                }),
                height: 430,
                x: 0,
                y: 0,
                title: '操作日志',
                renderTo: 'grid',
                viewConfig: {
                    stripeRows: true
                },
                listeners: {
                    selectionchange: function (view, rs) {
                        Ext.getCmp("delete").setDisabled(rs.length == 0);
                    }
                }
            })
            //创建Grid结束
            store.load({ params: { start: 0, limit: 10 } });

            $(document).ready(function () {
                //点击“查询”按钮后进行刷新
                $("#btnSearch").click(function () {
                    var startDate = document.getElementById("ContentPlaceHolder1_startDate_box").value;
                    var endDate = document.getElementById("ContentPlaceHolder1_endDate_box").value;
                    var User_ID = document.getElementById("txtUser").value;
                    var BusinessesName = $('#selectBusinesses option:selected').val();
                    var OperationType = $('#selectType option:selected').val();
                    //store前一定不能加var
                    if (startDate > endDate) {
                        Ext.Msg.alert("提示信息", "开始日期不能大于结束日期！");
                        return;
                    } else if (startDate == endDate) {
                        if (startDate!="")
                            var op = "=";
                    } else {
                        var op = "between";
                    }
                    store.currentPage = 1;
                    store.filters.clear();
                    store.filter([{ property: 'User_ID', value: User_ID }, { property: 'BusinessesName', value: BusinessesName },
                        { property: 'OperationType', value: OperationType }, { property: 'op', value: op }, { property: 'startDate', value: startDate },
                        { property: 'endDate', value: endDate }]);
                });

                $("#btnShowAll").click(function () {
                    store.currentPage = 1;
                    store.clearFilter();
                    document.getElementById("startDate_box").value = ""; 
                    document.getElementById("endDate_box").value = "";
                    document.getElementById("txtUser").value = "";
                });

            });

        })
    </script>
    <style type="text/css">
        .search {
            background-image: url(../../Content/images/plugin.gif) !important;
        }

        .remove {
            background-image: url(../../Content/images/delete.gif) !important;
        }

        .edit {
            background-image: url(../../Content/images/edit.gif) !important;
        }

        .add {
            background-image: url(../../Content/images/add.gif) !important;
        }

        .preview {
            background-image: url(../../Content/images/preview.png) !important;
        }
    </style>
    业务名称：<select id="selectBusinesses" name="D1">
        <option>井的管理</option>
        <option>用户管理</option>
        <option>部门管理</option>
        <option>数据管理</option>
    </select>
    操作人ID：<input id="txtUser" type="text" value="张三" />
    操作类型：<select id="selectType" name="D2">
        <option>删除</option>
        <option>添加</option>
        <option>修改</option>
    </select>
    <br />
    时间范围：<input id="startDate_box" runat="server" class="Wdate" value="" onclick="WdatePicker()" type="text" style="width: 100px" />
    --<input id="endDate_box" runat="server" class="Wdate" value="" onclick="WdatePicker()" type="text" style="width: 100px" />
    <input id="btnSearch" style="text-align: right" type="button" value="查询" />&nbsp;
    <input id="btnShowAll" type="button" value="显示全部" /><br />
    <input id="Checkbox1" type="checkbox" />自动刷新--每隔<select id="Select2" name="D3">
        <option>10</option>
        <option>30</option>
        <option>60</option>
        <option>120</option>
        <option>300</option>
    </select>秒 
    <input id="Button3" type="button" value="手动刷新" />
    <div id="grid"></div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="TitlePlaceHolder" runat="server">
    <div id="title" style="background-image: url('../../Content/images/toolbar_bg.gif'); background-repeat: repeat-x">
        <span class="font16 fLeft" style="font-size: 26px"><strong>管理操作日志</strong></span><span class="fRight mR10 mT08"></span>
    </div>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="TableHeadPlaceHolder" runat="server">
</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="TablePlaceHolder" runat="server">
</asp:Content>
